<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:s="http://jboss.com/products/seam/taglib"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:rich="http://richfaces.org/rich"
	xmlns:a4j="http://richfaces.org/a4j">
	
		<a4j:loadScript src="resource://jquery.js"></a4j:loadScript>

		<a4j:form id="OrderForm" styleClass="trn_form" ajaxSingle="true">
			<a4j:outputPanel id="msgContainer" ajaxRendered="true">
				<h:messages globalOnly="false" errorClass="msgError" styleClass="message" infoClass="msgInfo" />
			</a4j:outputPanel>
			<a4j:outputPanel id="OrderHeadPanel" ajaxRendered="true">
			<div id="OrderHead">
			
				<div class="form_table">
					<div class="form_row">
					<div class="form_fields">
						<s:label for="orderBuyType">Tipo de Compra:</s:label>
						<h:selectOneMenu
							styleClass="input"
							value="#{trnPurchaseOrder.orderHead.buyTypeData}"
							id="orderBuyType" converter="#{refConverter}">
							<a4j:support event="onchange" />
							<rich:ajaxValidator 
                   			event="onblur" 
                   			onsubmit="validateSelectField(
                   				fieldObject = this, 
                   				fieldMsgId = 'orderBuyTypeMsg', 
                   				required = 'true', 
                   				requiredMsg = 'Favor seleccione el tipo de compra')">
          						</rich:ajaxValidator>
							<s:selectItems
								value="#{withinHolder.refDetListByHeadCod('TIPCOMPRA')}"
								var="ref" label="#{ref.descrip}"
								noSelectionLabel="Tipo de Compra">
							</s:selectItems>

						</h:selectOneMenu>
						<div id="orderBuyTypeMsg" class="inactiveMsg"></div>
					</div>
					<div class="form_fields">
						<s:label for="orderBuyConditionData">Condicion Compra:</s:label>
						<h:selectOneMenu
							styleClass="input"
							converter="#{buyConditionConverter}"
							value="#{trnPurchaseOrder.orderHead.buyConditionData}"
							id="orderBuyConditionData">
							<a4j:support event="onchange" />
							<rich:ajaxValidator 
                   			event="onblur" 
                   			onsubmit="validateSelectField(
                   				fieldObject = this, 
                   				fieldMsgId = 'orderBuyConditionDataMsg', 
                   				required = 'true', 
                   				requiredMsg = 'Favor seleccione la Condicion de Compra')">
          						</rich:ajaxValidator>
							<s:selectItems 
								value="#{withinHolder.buyConditionList()}"
								var="buyCond" 
								label="#{buyCond.descrip}"
								noSelectionLabel="Condicion de compra">
							</s:selectItems>
						</h:selectOneMenu>
						<div id="orderBuyConditionDataMsg" class="inactiveMsg"></div>
					</div>
					<div class="form_fields">
						<s:label for="orderCostCenter">Centro de Costo:</s:label>
						<h:selectOneMenu
							styleClass="input"
							value="#{trnPurchaseOrder.orderHead.costCenterData}"
							id="orderCostCenter" 
							converter="#{refConverter}">
							<a4j:support event="onchange" />
							<rich:ajaxValidator 
                   			event="onblur" 
                   			onsubmit="validateSelectField(
                   				fieldObject = this, 
                   				fieldMsgId = 'orderCostCenterMsg', 
                   				required = 'true', 
                   				requiredMsg = 'Favor seleccione el Centro de Costo')">
          						</rich:ajaxValidator>
							<s:selectItems
								value="#{withinHolder.refDetListByHeadCod('CENTCOST')}"
								var="ref" label="#{ref.descrip}"
								noSelectionLabel="Centro de Costo">
							</s:selectItems>
						</h:selectOneMenu>
						<div id="orderCostCenterMsg" class="inactiveMsg"></div>
					</div>
				</div>
				<div class="form_row">
					<div class="form_fields">
						<s:label for="orderSupplier">Proveedor:</s:label>
						<h:inputText
							readonly="true"
							styleClass="input"
							value="#{trnPurchaseOrder.orderHead.supplierData}"
							id="orderSupplier"
							converter="#{supplierConverter}">
							<a4j:support event="onchange"/>
							<rich:ajaxValidator 
                   			event="onblur" 
                   			onsubmit="validateStringField(
                   				fieldObject = this, 
                   				fieldMsgId = 'orderSupplierMsg', 
                   				required = 'true', 
                   				requiredMsg = 'Favor seleccione el proveedor')">
          						</rich:ajaxValidator>
						</h:inputText>
						<a4j:commandLink
						id="selectOrderSupplier"
						action="#{trnPurchaseOrder.selectHolder.supplierPickList()}"
						oncomplete="#{rich:component('orderSupplierPickModalPanel')}.show()"
						ajaxSingle="true"
						reRender="orderSupplierListForm">
							<h:graphicImage value="/img/icons/table_multiple.png" />
						</a4j:commandLink>
						<rich:toolTip for="selectOrderSupplier" value="Seleccionar Proveedor"></rich:toolTip>
						<div id="orderSupplierMsg" class="inactiveMsg"></div>
					</div>
					<div class="form_fields">
						<s:label for="orderCurrency">Moneda:</s:label>
						<h:selectOneMenu
							styleClass="input"
							converter="#{currencyConverter}"
							value="#{trnPurchaseOrder.orderHead.currencyData}"
							id="orderCurrency">
							<a4j:support event="onchange"
								actionListener="#{trnPurchaseOrder.retrieveChangeType()}"
								reRender="orderChangeTypePanel"
								ajaxSingle="true" />
							<rich:ajaxValidator 
                   			event="onblur" 
                   			onsubmit="validateSelectField(
                   				fieldObject = this, 
                   				fieldMsgId = 'orderCurrencyMsg', 
                   				required = 'true', 
                   				requiredMsg = 'Favor seleccione la moneda')">
          						</rich:ajaxValidator>
							<s:selectItems 
								value="#{withinHolder.currencyList()}" 
								var="cur"
								label="#{cur.descrip}" 
								noSelectionLabel="Seleccione la Moneda">
							</s:selectItems>
						</h:selectOneMenu>
						<div id="orderCurrencyMsg" class="inactiveMsg"></div>
					</div>
					<a4j:outputPanel id="orderChangeTypePanel">
						<div class="form_fields">
							<s:label for="orderChangeType">Tipo de Cambio:</s:label>
							<h:inputText
								styleClass="input"
								value="#{trnPurchaseOrder.orderHead.changeType}"
								id="orderChangeType" 
								size="10" 
								disabled="true">
								<a4j:support event="onchange" />
								<a4j:support event="onblur"></a4j:support>
							</h:inputText>
							<div id="orderChangeTypeMsg" class="inactiveMsg"></div>
						</div>
					</a4j:outputPanel>
				</div>
				<div class="form_row">
					<div class="form_fields">
						<s:label for="orderDeliverDate">Fecha Entrega:</s:label>
						<rich:calendar 
							inputClass="input"
							id="orderDeliverDate"
							value="#{trnPurchaseOrder.orderHead.deliveryDate}" 
							datePattern="dd/M/yyyy"
							buttonClass="field_btn">
							<a4j:support event="oninputchange"></a4j:support>
							<rich:ajaxValidator 
                   			event="oninputblur" 
                   			onsubmit="validateDateField(
                   				fieldObject = this, 
                   				fieldMsgId = 'orderDeliverDateMsg', 
                   				required = 'true', 
                   				requiredMsg = 'Favor ingrese la fecha de factura',
                   				beforeToday = 'false', 
                   				afterToday = 'false', 
                   				inMonth = 'false')">
          						</rich:ajaxValidator>
          						<rich:ajaxValidator 
                   			event="onchanged" 
                   			onsubmit="validateDateField(
                   				fieldObject = this, 
                   				fieldMsgId = 'orderDeliverDateMsg', 
                   				required = 'true', 
                   				requiredMsg = 'Favor ingrese la fecha de factura',
                   				beforeToday = 'false', 
                   				afterToday = 'false', 
                   				inMonth = 'false')">
          						</rich:ajaxValidator>
						</rich:calendar>
						<div id="orderDeliverDateMsg" class="inactiveMsg"></div>	
					</div>
				</div>
				
				</div>
				
			</div>
		</a4j:outputPanel>
		<a4j:region id="OrderDetForm">
				<a4j:outputPanel id="OrderDetGridPanel">	
				<rich:datascroller align="center" for="PurchaseDetGrid"
						maxPages="15" page="#{dataTableScrollerBean.scrollerPage}"
						renderIfSinglePage="false" />			   			
				<div style="clear: both;" />
				<rich:panel styleClass="table_add" style="margin-top:10px;" rendered="true">
					<rich:dataTable id="PurchaseDetGrid" value="#{trnPurchaseOrder.allOrderDet}" var="row">
						<f:facet name="header">
							<rich:columnGroup>
								<rich:column rowspan="2">
									<h:selectBooleanCheckbox 
										id="selectAllPurchaseDet" 
										value="#{trnPurchaseOrder.selectedAll}" 
										onclick="this.blur()"
										disabled="#{empty trnPurchaseOrder.allOrderDet}">
							        	<a4j:support event="onchange" actionListener="#{trnPurchaseOrder.selectAll}" reRender="PurchaseDetGrid"/>
							      	</h:selectBooleanCheckbox>
							      	<rich:toolTip for="selectAllPurchaseDet" value="Seleccionar Todo"></rich:toolTip>
							      	<a4j:commandLink
							      		rendered="#{not empty trnPurchaseOrder.allOrderDet}"
							      		id="deleteSelectedPurchaseDet"
										action="#{trnPurchaseOrder.deleteSelected()}"
										reRender="OrderDetGridPanel, PurchaseDetGrid">
										<h:graphicImage value="/img/icons/table_delete.png" />
									</a4j:commandLink>
									<rich:toolTip for="deleteSelectedPurchaseDet" value="Eliminar Seleccionados"></rich:toolTip>
								</rich:column>
								<rich:column>
									<h:outputText value="Insumo" />
								</rich:column>
								<rich:column>
									<h:outputText value="Unidad de Medida" />
								</rich:column>
								<rich:column>
									<h:outputText value="I.V.A." />
								</rich:column>
								<rich:column>
									<h:outputText value="Cantidad" />
								</rich:column>
								<rich:column>
									<h:outputText value="Costo" />
								</rich:column>
								<rich:column>
									<h:outputText value="Descuento" />
								</rich:column>
								<rich:column>
									<h:outputText value="Recargo" />
								</rich:column>
								<rich:column rowspan="2">
									<a4j:commandButton id="orderInsDetailBtn" action="#{trnPurchaseOrder.insertDetail()}"
										value="Insertar" reRender="OrderDetGridPanel"/>
								</rich:column>
							
								<rich:column breakBefore="true">
									<h:selectOneMenu converter="#{suppliesConverter}"
										value="#{trnPurchaseOrder.orderDet.supplyData}" 
										id="orderDetSupply">
										<a4j:support event="onchange" actionListener="#{trnPurchaseOrder.retrieveSupplyData()}" reRender="orderTaxPanel, orderDetCostPanel"/>
										<rich:ajaxValidator 
		                    			event="onblur"
		                    			onsubmit="validateSelectField(
		                    				fieldObject = this, 
		                    				fieldMsgId = 'orderDetSupplyMsg', 
		                    				required = 'true', 
		                    				requiredMsg = 'Favor seleccione el insumo',
		                    				errorClass = 'msgErrorDet',
		                    				errorInput = 'inputErrorDet')">
		           						</rich:ajaxValidator>
										<s:selectItems id="SuplySelect"
											value="#{withinHolder.suppliesList()}" var="supp"
											label="#{supp.descrip}" noSelectionLabel="Insumo">
										</s:selectItems>
									</h:selectOneMenu>
									<div id="orderDetSupplyMsg" class="inactiveMsg"></div>
								</rich:column>
								<rich:column>
									<h:selectOneMenu converter="#{MeasureUnitConverter}"
										value="#{trnPurchaseOrder.orderDet.measureUnitData}"
										id="orderDetMeasureUnit" required="false"
										requiredMessage="Favor Seleccione la Unidad de Medida">
										<a4j:support event="onchange" actionListener="#{trnPurchaseOrder.retrieveSupplyCost()}" reRender="orderDetCostPanel"></a4j:support>
										<rich:ajaxValidator 
		                    			event="onblur"
		                    			onsubmit="validateSelectField(
		                    				fieldObject = this, 
		                    				fieldMsgId = 'orderDetMeasureUnitMsg', 
		                    				required = 'true', 
		                    				requiredMsg = 'Favor seleccione la UM',
		                    				errorClass = 'msgErrorDet',
		                    				errorInput = 'inputErrorDet')">
		           						</rich:ajaxValidator>
										<s:selectItems value="#{withinHolder.measureUnitList()}"
											var="cur" label="#{cur.descrip}" noSelectionLabel="">
										</s:selectItems>
									</h:selectOneMenu>
									<div id="orderDetMeasureUnitMsg" class="inactiveMsg"></div>
								</rich:column>
								
								<rich:column>
									<a4j:outputPanel id="orderTaxPanel" >
									<h:selectOneMenu converter="#{taxConverter}"
										value="#{trnPurchaseOrder.orderDet.taxData}" id="orderDetIva"
										disabled="true">
										<s:selectItems value="#{withinHolder.taxesList()}" var="cur"
											label="#{cur.descrip}">
										</s:selectItems>
									</h:selectOneMenu>
									</a4j:outputPanel>
								</rich:column>
								
								<rich:column>
									<h:inputText value="#{trnPurchaseOrder.orderDet.quantity}"
										id="orderDetQuantity"  
										size="10">
										<a4j:support event="onchange"></a4j:support>
										<rich:ajaxValidator 
		                    			event="onblur"
		                    			onsubmit="validateDecimalField(
		                    				fieldObject = this, 
		                    				fieldMsgId = 'orderDetQuantityMsg', 
		                    				required = 'true', 
		                    				requiredMsg = 'Favor ingrese la cantidad',
		                    				checkForZero = 'true',
		                    				errorClass = 'msgErrorDet',
		                    				errorInput = 'inputErrorDet')">
		           						</rich:ajaxValidator>
									</h:inputText>
									<div id="orderDetQuantityMsg" class="inactiveMsg"></div>
								</rich:column>
								<rich:column>
									<a4j:outputPanel id="orderDetCostPanel" >
									<h:inputText value="#{trnPurchaseOrder.orderDet.grossCost}"
										id="orderDetCost" 
										size="15">
										<a4j:support event="onchange"></a4j:support>
										<rich:ajaxValidator 
		                    			event="onblur"
		                    			onsubmit="validateDecimalField(
		                    				fieldObject = this, 
		                    				fieldMsgId = 'orderDetCostMsg', 
		                    				required = 'true', 
		                    				requiredMsg = 'Favor ingrese el costo',
		                    				checkForZero = 'true',
		                    				errorClass = 'msgErrorDet',
		                    				errorInput = 'inputErrorDet')">
		           						</rich:ajaxValidator>
									</h:inputText>
									</a4j:outputPanel>
									<div id="orderDetCostMsg" class="inactiveMsg"></div>
								</rich:column>
								<rich:column>
									<h:inputText value="#{trnPurchaseOrder.orderDet.discount}"
										id="orderDetDiscount" 
										size="10">
										<a4j:support event="onchange"></a4j:support>
										<rich:ajaxValidator 
		                    			event="onblur"
		                    			onsubmit="validateDecimalField(
		                    				fieldObject = this, 
		                    				fieldMsgId = 'orderDetDiscountMsg', 
		                    				required = 'false', 
		                    				requiredMsg = 'Favor ingrese el descuento',
		                    				checkForZero = 'negative',
		                    				errorClass = 'msgErrorDet',
		                    				errorInput = 'inputErrorDet')">
		           						</rich:ajaxValidator>
									</h:inputText>
									<div id="orderDetDiscountMsg" class="inactiveMsg"></div>
								</rich:column>
								<rich:column>
									<h:inputText value="#{trnPurchaseOrder.orderDet.charge}"
										id="orderDetCharge"
										size="10">
										<a4j:support event="onchange"></a4j:support>
										<rich:ajaxValidator 
		                    			event="onblur"
		                    			onsubmit="validateDecimalField(
		                    				fieldObject = this, 
		                    				fieldMsgId = 'orderDetChargeMsg', 
		                    				required = 'false', 
		                    				requiredMsg = 'Favor ingrese el recargo',
		                    				checkForZero = 'negative',
		                    				errorClass = 'msgErrorDet',
		                    				errorInput = 'inputErrorDet')">
		           						</rich:ajaxValidator>
									</h:inputText>
									<div id="orderDetChargeMsg" class="inactiveMsg"></div>
								</rich:column>
							</rich:columnGroup>
						</f:facet>
						<rich:column>
							<h:selectBooleanCheckbox value="#{row.selected}" />
						</rich:column>
						<rich:column rendered="#{not empty trnPurchaseOrder.allOrderDet}">
							<h:outputText value="#{row.supplyData.descrip}" />
						</rich:column>
						<rich:column rendered="#{not empty trnPurchaseOrder.allOrderDet}">
							<h:outputText value="#{row.measureUnitData.descrip}" />
						</rich:column>
						<rich:column rendered="#{not empty trnPurchaseOrder.allOrderDet}">
							<h:outputText value="#{row.taxData.descrip}" />
						</rich:column>
						<rich:column rendered="#{not empty trnPurchaseOrder.allOrderDet}">
							<h:outputText value="#{row.quantity}"/>
						</rich:column>
						<rich:column rendered="#{not empty trnPurchaseOrder.allOrderDet}">
							<h:outputText value="#{row.grossCost}" />
						</rich:column>
						<rich:column rendered="#{not empty trnPurchaseOrder.allOrderDet}">
							<h:outputText value="#{row.discount}" />
						</rich:column>
						<rich:column rendered="#{not empty trnPurchaseOrder.allOrderDet}">
							<h:outputText value="#{row.charge}" />
						</rich:column>
	
						<rich:column rendered="#{not empty trnPurchaseOrder.allOrderDet}">
							<h:outputText value="#{row.itemTotal}" />
						</rich:column>
					</rich:dataTable>
				</rich:panel>
					<div class="total_values">
						<div class="total_values_fields">
							<s:label for="orderTotal" style="float:left; float:left; margin-right:10px; top:3px;">
								<h:outputText value="Total Compra"/>
							</s:label>
							<h:inputText value="#{trnPurchaseOrder.orderHead.orderTotal}"
								id="orderTotal" required="false" size="10"
								disabled="true">
							<a4j:support event="onchange"></a4j:support>
							</h:inputText>
							<div class="msg_container">
								<rich:message for="orderTotal" />
							</div>
						</div>
					</div>
				</a4j:outputPanel>
			</a4j:region>
			<s:decorate template="/layout/displayButton.xhtml" styleClass="button_form">
				<a4j:commandButton value="Guardar" id="orderSaveRegBtn"
					action="#{trnPurchaseOrder.saveNewData()}"
					reRender="OrderForm"
					styleClass="button"
					onclick="onRequestStart();"
					oncomplete="onRequestEnd('j_id263:OrderForm', 9, #{trnPurchaseOrder.validateEntireForm})"
					/>
				<rich:spacer width="20px" />
				<a4j:commandButton value="Cancelar" id="orderCancelBtn"
					onclick="#{rich:component('OrderConfirmationModalPanel')}.show()"
					styleClass="button" />
			</s:decorate>
			<a4j:commandLink
					id="orderCloseBtn"
					styleClass="button"
					onclick="#{rich:component('OrderCloseModalPanel')}.show()" 
					style="position:relative; float:right; right:15px; margin-top:15px;">
					<h:graphicImage value="/img/icons/close.png"/>
			</a4j:commandLink>
	</a4j:form>
	
		<rich:modalPanel  id="OrderConfirmationModalPanel"
			resizeable="false" autosized="true" moveable="false" style="border:2px solid #6FADDF">
			<a4j:form>
			<div class="globalMessage">
				<h:outputText value="Esta seguro que desea cancelar la operacion?" />
			</div>
			<s:decorate template="/layout/displayButton.xhtml" styleClass="trn_button_form" style="width:270px; margin-top:0px; margin-left:auto; text-align:center;">
				<a4j:commandButton
					action="#{trnPurchaseOrder.cancelData()}"
					value="Aceptar" 
					id="OrderAcceptConfirmation"
					reRender="OrderForm"
					oncomplete="#{rich:component('OrderConfirmationModalPanel')}.hide()"
					styleClass="button" />
				<rich:spacer width="20px" />
				<a4j:commandButton value="Cancelar" id="OrderCancelConfirmation"
					onclick="#{rich:component('OrderConfirmationModalPanel')}.hide()"
					styleClass="button" />
			</s:decorate>
			</a4j:form>
		</rich:modalPanel>
		<rich:modalPanel  id="OrderCloseModalPanel"
			resizeable="false" autosized="true" moveable="false" style="border:2px solid #6FADDF">
			<a4j:form>
			<div class="globalMessage">
				<h:outputText value="Esta seguro que desea cancelar la operacion?" />
			</div>
			<s:decorate template="/layout/displayButton.xhtml" styleClass="trn_button_form" style="width:270px; margin-top:0px; margin-left:auto; text-align:center;">
				<a4j:commandButton
					action="#{trnPurchaseOrder.cancelData()}"
					value="Aceptar" 
					id="OrderAcceptClose"
					reRender="OrderForm"
					oncomplete="#{rich:component('OrderCloseModalPanel')}.hide();#{rich:component('modalOrder')}.hide();"
					styleClass="button" />
				<rich:spacer width="20px" />
				<a4j:commandButton value="Cancelar" id="OrderCancelClose"
					onclick="#{rich:component('OrderCloseModalPanel')}.hide()"
					styleClass="button" />
			</s:decorate>
			</a4j:form>
		</rich:modalPanel>
		
		<rich:modalPanel
			id="orderSupplierPickModalPanel"
			width="420"
			height="320"
			resizeable="false">
			<f:facet name="header">
				<h:panelGroup>
					<h:outputText value="Proveedor Pedidos" />
				</h:panelGroup>
			</f:facet>
			<f:facet name="controls">
				<h:panelGroup>
					<h:graphicImage value="/img/close.png" style="cursor:pointer"
						id="orderSupplierPickModalPanelHide">
					</h:graphicImage>
					<rich:componentControl for="orderSupplierPickModalPanel"
						attachTo="orderSupplierPickModalPanelHide" operation="hide" event="onclick" />
				</h:panelGroup>
			</f:facet>
			<h:panelGroup id="orderSupplierPickModalPanelEdit">
			<!--  **** Include of the update page ****  -->
				<a4j:include viewId="/fms/com/transactions/orderSupplierList.xhtml" />
			</h:panelGroup>
			<s:decorate template="/layout/displayButton.xhtml" styleClass="button_form" style="width:270px;">
				<a4j:form>
				<a4j:commandButton value="Aceptar" id="orderAcceptSelectedSupplier"
					action="#{trnPurchaseOrder.selectSupplier(trnPurchaseOrder.selectHolder.supplierPickData)}"
					reRender="OrderForm, orderSupplier"
					styleClass="button"
					oncomplete="if(#{empty facesContext.maximumSeverity}) #{rich:component('orderSupplierPickModalPanel')}.hide();"/>
				<rich:spacer width="20px" />
				<a4j:commandButton value="Cancelar" id="cancelBtn"
					styleClass="button" />
				</a4j:form>
			</s:decorate>
		</rich:modalPanel>

</ui:composition>